import { useEffect, useState, useRef } from 'react';
import { Row, Col, Popover } from 'antd';
import classNames from 'classnames';
import styles from './index.less';

const activityData = {
  data: {
    result: [
      {
        id: 1,
        weekName: '第2周',
        content:
          '乒乓球比赛乒乓球比赛乒乓球比赛乒乓球比赛乒乓球比赛乒乓球比赛乒乓球比赛乒乓球比赛乒乓球比赛乒乓球比赛',
        responsor: '张三',
      },
    ],
  },
};

export default () => {
  return (
    <div className={classNames(styles.wrapper)} style={{ display: 'flex' }}>
      <div className={classNames('bg', 'bg-1', styles['bg-1'])} />
      <div className={classNames('bg', 'bg-2', styles['bg-2'])} />
      <Row className={styles['core-wrapper']} style={{ flexFlow: 'column', flex: 1, width: 0 }}>
        <Col flex="52px">
          <Row className={classNames('linear-title', styles.title)} justify="center">
            <span>课外活动</span>
          </Row>
        </Col>
        <Col flex="32px">
          <Row className="data-table-row" wrap={false}>
            <Col flex="85px" className="header">
              周次
            </Col>
            <Col flex="auto" className="header">
              活动内容
            </Col>
            <Col flex="80px" className="header">
              负责人
            </Col>
          </Row>
        </Col>
        <Col flex="auto" className="data-table-body">
          {activityData.data?.result?.map((x) => (
            <Row key={x.id} className="data-table-row" wrap={false}>
              <Col flex="85px">{x.weekName}</Col>
              <Col flex="auto">
                <Popover
                  overlayClassName={styles.overlay}
                  trigger="click"
                  content={<p>{x.content}</p>}
                >
                  {x.content}
                </Popover>
              </Col>
              <Col flex="80px">{x.responsor}</Col>
            </Row>
          ))}
        </Col>
      </Row>
    </div>
  );
};
